<template>
	<view class="zh-u-popup">
		<u-mask :show="props.show" @click="close"></u-mask>
		<view class="box" :class="{'active':props.show}" @touchmove.stop.prevent="movestop">
			<view class="header display-flex justify-between">
				<view class='text-center flex'>
					<text class="font-32 font-bold">{{ title }}</text>
				</view>
				<image src="@/static/icons/close_icon.png" class="close-icon" @click="close"/>
			</view>
			<scroll-view scroll-y="true" class="content" >
				<slot name="content"></slot>
			</scroll-view>
			<view class="footer">
				<slot name="footer"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps<{
		title?: string
		show?: boolean
		// list: Array<{
		// 	text?: string
		// }>
	}>()
	
	const emit = defineEmits(['close'])
	
	const movestop = () => {}
	
	const close = () => {
		emit('close')
	}

</script>

<style lang="scss">
.zh-u-popup {
	.box {
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		max-height:0;
		background-color: $uni-bg-card-color;
		border-radius: 25px 25px 0px 0px;
		padding:0 30rpx;
		z-index:1000;
		&.active {
			max-height: 1000rpx;
			transition: all .3s ease-in-out;
		}
		.header {
			padding-top: 27rpx;
			.close-icon {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.footer {
			padding-bottom:60rpx;
		}
	}
	
}
</style>
